import React from 'react'
import './ContentList.scss'
import {connect} from 'react-redux'
import {getListData} from '../../actions/contentListAction'
import ListItem from './ListItem/ListItem'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
// 附近商家列表
class ContentList extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            isend: false
        }
        this.page = 0
        this.fetchData(this.page)
    }
    fetchData(page){
        this.props.dispatch(getListData(page))
    }
    
    // 滚动方法
    onLoadPage () {
  
        // 做多滚动三次
        this.page++
        if (this.page > 3){
            this.setState({
                isend: true
            })
        } else {
            this.fetchData(this.page);
        }
    
    }
    // 获取滚动数据
    
    renderItem(){
        let list = this.props.list

        return list.map((item, index) => {
            return <ListItem key={index} itemData={item}></ListItem>
        })
    }
    render(){
        return (
            <div className='list-content'>
                <h4 className="list-title">
                    <span className="title-line"></span>
                    <span>附近商家</span>
                    <span className="title-line"></span>
                </h4>
                <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.state.isend}>
                    {this.renderItem()}
                </ScrollView>
               
            </div>
        )
    }
}

export default connect(
    state => ({
        list: state.contentListReducer.items
    })
)(ContentList)